<template>
	<view class="search">
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" ref="paging" v-model="dotList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
					<view class="box-container">
						<view class="mid" v-for="(item, index) in dotList" :key="index" @click="handelAppoint(item)">
							<view class="con-left">
								<image :src="$fullImageUrl(item.avatarUrl)"></image>
							</view>
							<view class="con-right">
								<view class="con-right-top">
									<view>
										<view>{{ item.expertName }}</view>
									</view>
									<view>
										<image :src="$buildFullImageUrl('/static/consult/address.svg')"></image>
										<text>{{ item.cityCopy }}</text>
									</view>
								</view>
								<view class="con-right-mid">
									<view>{{ item.title }}</view>
									<view @click.stop="cancleAttent(item)">移除</view>
								</view>
								<view class="con-right-bot">
									<view>时长：{{ item.totalConsultHours }}+</view>
									<view>从业{{ item.workingYears }}年</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
import { getAttentionExpertList, setExpertUser } from '@/api/consult/index.js';
import { getLastPartAfterLastComma } from '@/utils/common.js';
export default {
	data() {
		return {
			dotList: []
		};
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize
			};
			getAttentionExpertList(querys).then((res) => {
				let list = [...res.rows];
				list.map((i) => {
					i.cityCopy = getLastPartAfterLastComma(i.city);
				});
				this.$refs.paging.completeByTotal(list, res.total);
			});
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		cancleAttent(e) {
			let obj = {
				attentionStatus: '1',
				expertId: e.id * 1,
				userId: uni.getStorageSync('user_id')
			};
			setExpertUser(obj).then((res) => {
				this.$refs.paging.reload();
				this.$modal.showToast('已取消关注');
			});
		}
	}
};
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	height: 100%;
	background: #fff;

	.con-wrap {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.scrollWrap {
			width: 100%;
			height: 100%;
		}

		.box-container {
			width: 100%;
			// height: 100%;
			padding: 20rpx 30rpx 0 32rpx;
			box-sizing: border-box;

			.mid {
				width: 100%;
				height: 216rpx;
				margin-bottom: 24rpx;
				padding: 14rpx 0rpx 14rpx 12rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.con-left {
					width: 162rpx;
					height: 188rpx;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}

					> view {
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-weight: 600;
						font-size: 24rpx;
						color: #ffffff;
						position: absolute;
						bottom: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.3);
					}
				}

				.con-right {
					width: calc(100% - 186rpx);
					height: 100%;
					padding-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					&-top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						> view:first-child {
							display: flex;
							align-items: center;

							> view:nth-child(1) {
								font-family: PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								color: #4a548a;
								margin-right: 20rpx;
							}

							> view:nth-child(2) {
								display: flex;
								align-items: center;

								> text:nth-child(1) {
									font-weight: 400;
									font-size: 20rpx;
									color: #4a548a;
								}

								> text:nth-child(2) {
									font-weight: 600;
									font-size: 28rpx;
									color: #4a548a;
									margin: 0 10rpx 4rpx;
								}

								> text:nth-child(3) {
									font-weight: 400;
									font-size: 20rpx;
									color: #4a548a;
								}
							}
						}

						> view:last-child {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 25rpx;
								margin-right: 4rpx;
							}

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								padding-right: 14;
							}
						}
					}

					&-mid {
						width: 100%;
						display: flex;
						justify-content: space-between;

						> view:nth-child(1) {
							width: calc(100% - 114rpx);
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							font-weight: 400;
							font-size: 24rpx;
							color: #696b7b;
						}

						> view:nth-child(2) {
							width: 104rpx;
							height: 44rpx;
							line-height: 44rpx;
							color: #fff;
							box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
							border-radius: 22rpx;
							font-weight: 400;
							font-size: 24rpx;
							background: #81b899;
							text-align: center;
						}
					}

					&-bot {
						width: 100%;
						display: flex;

						// margin-top: 18rpx;
						> view {
							background: #eef4ff;
							border-radius: 8rpx;
							padding: 8rpx 16rpx;
							border: 2rpx solid rgba(74, 84, 138, 0.102);
							font-weight: 400;
							font-size: 20rpx;
							color: #132066;
						}

						> view:nth-child(2) {
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
}
</style>
